<template>
    <div class="song-center">
        <div class="song">
            <div class="title">{{ songDetail.name }}<span class="song-icon">
                    <el-link :href="`/mv/detail?id=${props.songDetail.mv}`" :underline="false" :title='`播放mv`'
                        v-if="props.songDetail.mv != 0"><i class="iconfont icon-MV111"
                            style="color: #409eff;"></i></el-link>
                    <el-link :underline="false" :title='`此歌曲播放需要vip`' v-if="props.songDetail.vip"><i
                            class="iconfont icon-huiyuan1" style="color: #409eff;"></i></el-link>
                </span></div>
            <div class="ar">
                <el-row :gutter="0">
                    <el-col :span="12">
                        <div class="ar-name">
                            歌手：<span v-for="item, index in songDetail.singer" :key="item.id"><span v-if="index == 0">
                                    <el-link :href="'/artist?id=' + item.id" :underline="false"
                                        :title="`歌手：${item.name}`">{{ item.name }}</el-link>
                                </span>
                                <span v-else> / <el-link :href="'/artist?id=' + item.id" :underline="false"
                                        :title="`歌手：${item.name}`">{{ item.name
                                        }}</el-link></span>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="al-name">
                            所属专辑：<span><el-link :href="'/album?id=' + songDetail.album.id" :underline="false"
                                    :title="`专辑：${songDetail.album.name}`">{{
                                        songDetail.album.name }}</el-link></span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <SongLyric :lyric="props.lyric"></SongLyric>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SongLyric from './SongLyric.vue'
const props = defineProps({
    lyric: {
        type: Array,
        default: () => []
    },
    songDetail: {
        type: Object,
        default: () => { }
    }
})
</script>

<style lang="less" scoped>
.song-center {
    width: 100%;
    box-sizing: border-box;
    padding: 50px 0 0 0;
    min-width: 400px;

    .song {
        .title {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;

            .song-icon {

                i {
                    font-size: 25px;
                    margin-left: 10px;
                }
            }
        }

        .ar {
            color: black;
            margin-bottom: 15px;

            .ar-name {
                font-size: 14px;
                color: #666;
                //溢出显示省略号
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;

                span {
                    .el-link {
                        color: black;
                    }
                }
            }

            .al-name {
                font-size: 14px;
                color: #666;
                //溢出显示省略号
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;

                span {
                    .el-link {
                        color: black;
                    }
                }
            }
        }


    }


}
</style>